<template>
<div>
    <div class="list">
        <div class="item" v-for="(item,i) in ZYMedicalRecord" :key="i" @click="goDetail(item)">
            <!--<router-link :to="{path:'/zyxx/detail',query:{item:item}}">-->
                <div class="title">
                    <p class="fl">
                        {{item.jzyy}}
                        <!-- <span>{{item.sfycy==='0'?'未出院':'已出院'}}</span> -->
                        <!-- <span class="cur">已出院</span> -->
                    </p>
                    <span class=“fl”>{{item.sfycy==='0'?'未出院':'已出院'}}</span>
                </div>
                <p class="subject">
                    入院日期：{{item.cysj}}
                </p>
                <div class="date">
                    <p>
                        住院号：{{item.zyh}}
                    </p>
                    <p>
                        就诊日期：{{item.rysj}}
                    </p>
                </div>
            <!--</router-link>-->
        </div>
    </div>
    <!-- 数据仅供参考提示，hosName通过接口获得，在该组件赋值传给子组件，首页不需要传值，默认为空 -->
    <tips :hosName="hosName"></tips>
    <!-- 水印 -->
    <div class="watermark"></div>
</div>
</template>

<script>
import tips from '@/components/tips.vue'
import { getZYMedicalRecordApi} from '@/api/healthRecords'
export default {
    components:{
        tips
    },
    name: 'zyxx',
    data () {
        return {
            msg: 'Welcome to Your Vue.js App',
            hosName:'',//医院名称
            ZYMedicalRecord:{},
            paramter:JSON.parse(localStorage.getItem('zjhm'))
        }
    },
    methods: {
        getZYMedicalRecord() {
            getZYMedicalRecordApi(this.paramter).then(response => {
                if (response.data.code == 1) {
                    response.data.data.forEach(item => {
                        item.chuorzhu=item.sfycy==='0'?'未出院':'已出院'
                    })
                    this.ZYMedicalRecord = response.data.data;


                }
            })
        },
        goDetail(item) {
            this.$router.push({ name: "zyxxDetail", query: { item } });
            localStorage.setItem('zyjbxx',  JSON.stringify(item))
        }
    },
    created() {
        this.getZYMedicalRecord()
    }


}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.fl{
    float:left;
}
.fr{
    float:right;
}
.list {
    .item {
        background: #fff;
        border-bottom: #ddd solid 1px;
        padding: 1rem;
        .title {
            font-size: 1.3rem;
            color: #333;
            margin-bottom: 1px;
            overflow: hidden;
            font-weight: bold;
             p {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 77%;
                
            }
            span {
                color: #18B670;
                display: inline-block;
                width: 3.8rem;
                height: 1.5rem;
                line-height: 1.4rem;
                text-align: center;
                border: #18B670 solid 1px;
                font-weight: normal;
                font-size: 1rem;
                border-radius: 0.6rem;
                vertical-align: middle;
            }
            span.cur {
                border: #FFA73B solid 1px;
                color: #FFA73B;
            }
            
        }
        .subject {
            color: #969696;
            font-size: 1rem;
            margin-top: 0.6rem;
            text-align: right;
            span {
                display: inline-block;
                border: #FFA73B solid 1px;
                color: #FFA73B;
                border-radius: 13px;
                margin-left: 10px;
                padding: 0 0.6rem;
                font-size: 1rem;
            }
            span.blue {
                border: #3DC4F5 solid 1px;
                color: #3DC4F5;
            }
        }
        .date {
            color: #969696;
            font-size: 1rem;
            margin-top: 0.6rem;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            p {
                width: 50%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            p:last-child {
                text-align: right;
            }
        }
    }
}

</style>
